<template>
  <div class="zh-ebrochure">
    <div class="yinyue">
      <audio :loop="true" class="yinyue-audio" id="yinyue-audio" :volume="0.8" preload="auto">
        <source src="@/assets/music/zh-ebrochure.mp3" type="audio/mp3"/>
      </audio>
      <div class="yinyue-box">
        <div class="yinyue-text">
          <span>点击播放</span>
        </div>
        <img src="@/assets/images/ebrochure/yinyue.svg" class="yinyue-img" :class="play === 1?'active':''" @click="playMusicChange"/>
      </div>
    </div>
    <div class="curtain" v-show="showCurtain">
      <span v-for="(item, index) in curtainArr" :key="index" :style="`background:${item.color};width:${item.width};animation:${item.animation}`" class="curtain-box"></span>
    </div>
    <van-swipe class="zh-ebrochure-swiper"
      @change="onSlideChange"
      :loop="true"
      :vertical="true"
      :show-indicators="false"
      :height="swiperHeight"
    >
      <!-- loop可循环轮播，autoplay可自动播放 -->
      <!-- 0 -->
      <van-swipe-item>
        <div class="index" v-show="show === 0">
          <img src="@/assets/images/ebrochure/index_bg.png" class="index-bg" @dragstart.prevent/>
          <img src="@/assets/images/ebrochure/logo.png" class="index-logo animate__animated animate__bounceInDown" @dragstart.prevent/>
          <div class="index-text animate__animated animate__zoomIn">致道恒达 ● 通济天下</div>
          <div class="company-name">
            <img src="@/assets/images/ebrochure/company_name.png" class="company-name-img animate__animated animate__slideInUp" @dragstart.prevent/>
          </div>
        </div>
      </van-swipe-item>
      <!-- 1 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_01.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 1">
          <title-Container title="企业介绍" enTitle ="company profile" ></title-container>
          <div  class="zh-ebrochure-content">
            <div class="profile">
              <div class="profile-text animate__animated animate__zoomIn">中恒纺织交易市场（广东）有限公司坐落在粤港澳大湾区重要节点城市佛山市，成立于2019年1月，是中国机械工业集团有限公司旗下中国恒天集团有限公司核心企业——中国纺织对外经济技术合作有限公司绝对控股的混合所有制企业。公司秉承“合力同行，创新共赢”的企业理念，“协同、创新、卓越”的企业精神，旨在打造中国规模最大、最先进的集纺织贸易、项目运作、仓储物流、展览展示、供应链增值服务等多功能于一体，线上线下协同发展的第三方国际化纺织交易平台和服务平台。</div>
              <img src="@/assets/images/ebrochure/profile_img.png" class="profile-img animate__animated animate__zoomIn" @dragstart.prevent>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 1"></footer-container>
      </van-swipe-item>
      <!-- 2 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_01.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 2">
          <title-Container title="企业介绍" enTitle ="company profile"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="profile-02">
              <div class="profile-02-item display-flex">
                <img class="profile-img-04  animate__animated animate__zoomIn" src="@/assets/images/ebrochure/profile_img_04.png" @dragstart.prevent/>
                <div class="profile-text  animate__animated animate__slideInRight" >
                  <div class="cn">中国机械工业集团有限公司</div>
                  <div class="en">CHINA NATIONAL MACHINERY INDUSTRY CORPORATION</div>
                </div>
              </div>
              <div class="deconate">
                <div class="triangle"></div>
              </div>
              <div class="profile-02-item display-flex ">
                <img class="profile-img-04  animate__animated animate__zoomIn" src="@/assets/images/ebrochure/profile_img_04.png" @dragstart.prevent/>
                <div class="profile-text  animate__animated animate__slideInRight">
                  <div class="cn">中国恒天集团有限公司</div>
                  <div class="en">CHINA HI-TECH GROUP CORPORATION</div>
                </div>
              </div>
              <div class="deconate">
                <div class="triangle"></div>
              </div>
              <div class="profile-02-item display-flex ">
                <img class="profile-img-04  animate__animated animate__zoomIn" src="@/assets/images/ebrochure/profile_img_05.png" @dragstart.prevent/>
                <div class="profile-text  animate__animated animate__slideInRight">
                  <div class="cn">中国纺织对外经济技术合作有限公司</div>
                  <div class="en">CHINA CTEXIC CORPORATION</div>
                </div>
              </div>
              <div class="deconate">
                <div class="triangle"></div>
              </div>
              <div class="profile-02-item display-flex ">
                <img class="profile-img-04  animate__animated animate__zoomIn" src="@/assets/images/ebrochure/profile_img_06.png" @dragstart.prevent/>
                <div class="profile-text  animate__animated animate__slideInRight">
                  <div class="cn">中恒纺织交易市场（广东）有限公司</div>
                  <div class="en">CHINA TEXCHANGE CO., LTD.</div>
                </div>
              </div>
              <div class="deconate">
                <!-- <div class="triangle"></div> -->
              </div>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 2"></footer-container>
      </van-swipe-item>
      <!-- 3 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_01.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 3">
          <title-Container title="企业介绍" enTitle ="company profile"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="profile-01">
              <div class="display-flex profile-item-01">
                <div class="profile-01-text animate__animated animate__slideInLeft">
                  <div class="profile-01-triangle animate__animated animate__fadeIn animate__delay-1s"></div>
                  <span class="animate__animated animate__slideInLeft">中国机械工业集团有限公司（国机集团）是中央直接管理的国有重要骨干企业，发源于第一机械工业部，由原机械工业部70多家科研设计院所、装备制造和工贸企业沿革发展而来。</span>
                </div>
                <img src="@/assets/images/ebrochure/profile_img_01.png" class="profile-01-img animate__animated animate__slideInRight" @dragstart.prevent/>
              </div>
              <div class="display-flex profile-item-02">
                <img src="@/assets/images/ebrochure/profile_img_02.png" class="profile-02-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                <div class="profile-02-text animate__animated animate__slideInRight">
                  <div class="profile-02-triangle animate__animated animate__fadeIn  animate__delay-1s"></div>
                  <span class="animate__animated animate__slideInRight">中国恒天集团有限公司是国内以纺织装备为核心主业的中央企业</span>
                </div>
              </div>
              <div class="display-flex profile-item-03">
                <div class="profile-03-text animate__animated animate__slideInLeft">
                  <div class="profile-03-triangle animate__animated animate__fadeIn animate__delay-1s"></div>
                  <span class="animate__animated animate__slideInLeft">1984年11月28日，中国纺织对外经济技术合作有限公司的成立招待会由纺织工业部吴文英部长主持，是我国成立最早的国有大型外经贸企业之一。</span>
                </div>
                <img src="@/assets/images/ebrochure/profile_img_03.png" class="profile-03-img animate__animated animate__slideInRight" @dragstart.prevent/>
              </div>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 3"></footer-container>
      </van-swipe-item>
      <!-- 4 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_04.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 4">
          <title-Container title="服务" enTitle ="Services" type="2"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="service">
              <div class="service-title animate__animated animate__bounce">两个平台</div>
              <div class="service-sub-title animate__animated animate__zoomIn">“一站式”交易平台</div>
              <div class="service-sub-des animate__animated animate__zoomIn">商户线下将棉纱现货入“中恒云仓”，线上入驻“中恒e纺”平台推广，通过中恒交易平台进行交易，平台确保现货高效交接，交易规范安全、公平公正。</div>
              <div class="service-sub-title animate__animated animate__zoomIn">“一门式”服务平台</div>
              <div class="service-sub-des animate__animated animate__zoomIn">“一站式”交易的延伸，为买家和卖家双方提供各种便捷增值服务，以六项服务模式为基础，根据客户个性需求，即时进行量身定做服务。</div>
            </div>
            <div class="display-flex service-img">
              <img src="@/assets/images/ebrochure/service_01.png" class="service-01-img animate__animated animate__slideInLeft" @dragstart.prevent/>
              <img src="@/assets/images/ebrochure/service_02.png" class="service-02-img animate__animated animate__slideInRight" @dragstart.prevent/>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 4"></footer-container>
      </van-swipe-item>
      <!-- 5 -->
      <van-swipe-item class="swiper-slide-box">
        <!-- <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_04.png" @dragstart.prevent/> -->
        <div class="swiper-box" v-show="show === 5">
          <title-Container title="服务" enTitle ="Services" type="2"></title-container>
            <div  class="zh-ebrochure-content">
              <div class="display-flex service-decorate">
                <div class="service-decorate-left  animate__animated animate__zoomIn">
                  <div class="service-decorate-circle service-decorate-circle-01">
                    <span>1</span>
                  </div>
                  <div class="service-decorate-circle service-decorate-circle-02">
                    <span>2</span>
                  </div>
                  <div class="service-decorate-circle service-decorate-circle-03">
                    <span>3</span>
                  </div>
                  <div class="service-decorate-01">
                    <div class="service-decorate-02">
                      <div class="service-decorate-03">
                        <div class="service-decorate-03-text">
                          <span>六项</span>
                          <span>服务</span>
                        </div>
                        
                      </div>
                    </div>
                  </div>
                </div>
                <div class="service-content-right">
                  <div class="service-content-right-box service-content-right-box-01 animate__animated animate__slideInRight">
                    <span  class="service-content-right-box-title">中恒e购：</span>
                    <div  class="service-content-right-box-des animate__animated animate__zoomIn">
                      <span>以国内外合作渠道及交易平台信息流为依托，整合国内外产品资源数据，提供定向采购服务。</span>
                    </div>
                  </div>
                  <div class="service-content-right-box service-content-right-box-02 animate__animated animate__slideInRight">
                    <span  class="service-content-right-box-title">中恒e销：</span>
                    <div  class="service-content-right-box-des animate__animated animate__zoomIn">
                      <span>以交易平台上客户求购需求和“中恒云仓”现货承载，协助企业销售产品，提供定向销售服务。</span>
                    </div>
                  </div>
                  <div class="service-content-right-box service-content-right-box-03 animate__animated animate__slideInRight">
                    <span  class="service-content-right-box-title">中恒e助：</span>
                    <div  class="service-content-right-box-des animate__animated animate__zoomIn">
                      <span>客户在“中恒云仓”的库存可实现货物采购与销售的即时转换，解决供应链痛点，平台提供快捷的供应链定向合作服务。</span>
                    </div>
                  </div>
                </div>
              </div>
              
            </div>
        </div>
        <footer-Container  v-show="show === 5"></footer-container>
      </van-swipe-item>
      <!-- 6 -->
      <van-swipe-item class="swiper-slide-box">
        <!-- <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_04.png" @dragstart.prevent/> -->
        <div class="swiper-box" v-show="show === 6">
          <title-Container title="服务" enTitle ="Services" type="2"></title-container>
          <div  class="zh-ebrochure-content">
            <div  class="display-flex service-decorate">
              <div class="service-decorate-left animate__animated animate__zoomIn">
                <div class="service-decorate-circle service-decorate-circle-01">
                    <span>4</span>
                  </div>
                  <div class="service-decorate-circle service-decorate-circle-02">
                    <span>5</span>
                  </div>
                  <div class="service-decorate-circle service-decorate-circle-03">
                    <span>6</span>
                  </div>
                <div class="service-decorate-01">
                  <div class="service-decorate-02">
                    <div class="service-decorate-03">
                      <div class="service-decorate-03-text">
                        <span>六项</span>
                        <span>服务</span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="service-content-right">
                <div class="service-content-right-box service-content-right-box-01  animate__animated animate__slideInRight">
                  <span  class="service-content-right-box-title">中恒集采：</span>
                  <div class="service-content-right-box-des  animate__animated animate__zoomIn ">
                    <span>根据市场的集中需求，组织平台客户进行拼团式的集约采购、定向分发。</span>
                  </div>
                </div>
                <div class="service-content-right-box service-content-right-box-02  animate__animated animate__slideInRight">
                  <span  class="service-content-right-box-title">中恒国贸：</span>
                  <div class="service-content-right-box-des  animate__animated animate__zoomIn">
                    <span>利用国际贸易领域强大的专业优势，开展全链条进出口定向贸易。</span>
                  </div>
                </div>
                <div class="service-content-right-box service-content-right-box-03  animate__animated animate__slideInRight">
                  <span  class="service-content-right-box-title">中恒定制：</span>
                  <div class="service-content-right-box-des  animate__animated animate__zoomIn">
                    <span>针对客户个性需求，在产品、流通、市场、供应链等领域共同设计合作方案，开展量身定做式的精准服务，独特唯一、共惠共赢。</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 6"></footer-container>
      </van-swipe-item>
      <!-- 7 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_03.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 7">
          <title-Container title="产业" enTitle ="Industry" type="2"></title-container>
          <div  class="zh-ebrochure-content">
            <div  class="industry">
              <div class="display-flex industry-item">
                <img src="@/assets/images/ebrochure/industry_01.png" class="industry-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                <div class="industry-right  animate__animated animate__slideInRight">
                  <div class="industry-right-title  animate__animated animate__fadeIn">中恒纱线运营中心</div>
                  <div class="industry-right-des animate__animated animate__slideInRight">
                    <span>总规划25万平方米， </span>
                    <span>已运营8万平方米</span>
                  </div>
                </div>
              </div>
              <div class="display-flex industry-item">
                <img src="@/assets/images/ebrochure/industry_02.png" class="industry-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                <div class="industry-right animate__animated animate__slideInRight">
                  <div class="industry-right-title animate__animated animate__fadeIn">中恒纺织总部基地</div>
                  <div class="industry-right-des animate__animated animate__slideInRight">
                    <span>总规划25万平方米，</span>
                    <span>已建成5万平方米，</span>
                  </div>
                </div>
              </div>
              <div class="display-flex industry-item">
                <img src="@/assets/images/ebrochure/industry_03.png" class="industry-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                <div class="industry-right animate__animated animate__slideInRight">
                  <div class="industry-right-title animate__animated animate__fadeIn">中恒纺织交易市场</div>
                  <div class="industry-right-des animate__animated animate__slideInRight">
                    <span>多功能大型纺织交易</span>
                    <span>综合体，满足多层次、 </span>
                    <span>多样化市场需求。</span>
                  </div>
                </div>
              </div>
              <div class="display-flex industry-item">
                <img src="@/assets/images/ebrochure/industry_04.png" class="industry-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                <div class="industry-right animate__animated animate__slideInRight">
                  <div class="industry-right-title">竹基、鸿河地块项目推进中</div>
                  <!-- <div class="industry-right-des animate__animated animate__slideInRight">
                    <span>竹基、鸿河地块项目推进中</span>
                  </div> -->
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 7"></footer-container>
      </van-swipe-item>
      <!-- 8 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_02.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 8">
          <title-Container title="融合" enTitle ="Merge" type="2"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="merge">
              <div class="merge-box-01 animate__animated animate__slideInLeft">
                <div class="merge-01-title animate__animated animate__zoomIn">中恒云仓体系</div>
              </div>
              <div class="merge-box-04 animate__animated animate__slideInRight">
                <img src="@/assets/images/ebrochure/merge_map_01.png" class="merge-map-01" @dragstart.prevent/>
              </div>
              <div class="display-flex merge-box-05 justify-between">
                <img src="@/assets/images/ebrochure/merge_map_02.png" class="merge-map-02 animate__animated animate__slideInUp" @dragstart.prevent/>
              </div>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 8"></footer-container>
      </van-swipe-item>
      <!-- 9 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_02.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 9">
          <title-Container title="融合" enTitle ="Merge" type="2"></title-container>
          <div  class="zh-ebrochure-content">
             <div class="merge">
              <div class="merge-box-01 merge-box-01-border animate__animated animate__slideInRight">
                <div class="merge-01-title animate__animated animate__zoomIn animate__delay-1s">中恒云仓体系</div>
                <div class="merge-01-des animate__animated animate__zoomIn animate__delay-1s">以中恒自有产业项目为基础，按照服务业务需求，打造覆盖全国主要纺织市场的符合中恒标准和管理要求的云仓体系。</div>
              </div>
              <div class="merge-box-03 animate__animated animate__zoomIn">
                <img src="@/assets/images/ebrochure/merge_02.png" class="merge-02" @dragstart.prevent/>
              </div>
              <div class="display-flex merge-box-02 justify-between">
                <img src="@/assets/images/ebrochure/merge_01.png" class="merge-02-01 animate__animated animate__slideInLeft" @dragstart.prevent/>
                <img src="@/assets/images/ebrochure/merge_04.png" class="merge-02-02 animate__animated animate__slideInRight" @dragstart.prevent/>
              </div>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 9"></footer-container>
      </van-swipe-item>
      <!-- 10 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_02.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 10">
          <title-Container title="融合" enTitle ="Merge" type="2"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="merge-01">
              <div class="merge-01-title animate__animated animate__zoomIn">
                <span class="animate__animated animate__zoomIn animate__delay-1s">中恒品牌价值+中恒管理输出</span>
              </div>
              <div class="merge-01-des animate__animated animate__zoomIn">
                <span class="animate__animated animate__zoomIn animate__delay-1s">发挥自身品牌，公信力，专业性等优势，打造中恒e纺品牌体系，输出管理和运营，与客户合作共赢</span>
              </div>
              <div class="merge-01-decorate  animate__animated animate__zoomIn">
                <div class="merge-circle-01  animate__animated animate__zoomIn animate__delay-1s"></div>
                <div class="merge-circle-02  animate__animated animate__zoomIn animate__delay-1s"></div>
                <div class="merge-circle-03  animate__animated animate__zoomIn animate__delay-1s"></div>
                <div class="merge-circle-04  animate__animated animate__slideInRight"></div>
                <img src="@/assets/images/ebrochure/merge_03.png" class="merge-03" @dragstart.prevent/>
              </div>
            
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 10"></footer-container>
      </van-swipe-item>
      <!-- 11 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_04.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 11">
          <title-Container title="应用" enTitle ="Application" type="2"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="application">
              <div class="display-flex application-box animate__animated animate__slideInLeft">
                <div class="application-left">
                  <img src="@/assets/images/ebrochure/application_01.png" class="application-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                </div>
                <div class="application-right">
                  <div class="application-right-title animate__animated animate__zoomIn">构建纺织品产业链服务生态</div>
                  <div class="application-right-des animate__animated animate__zoomIn animate__delay-1s">商业Saas服务生态层、整合产业链生态服务、能力层</div>
                </div>
              </div>
              <div class="display-flex application-box  animate__animated animate__slideInLeft">
                <div class="application-left">
                  <img src="@/assets/images/ebrochure/application_02.png" class="application-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                </div>
                <div class="application-right">
                  <div class="application-right-title animate__animated animate__zoomIn">业务中台</div>
                  <div class="application-right-des animate__animated animate__zoomIn animate__delay-1s">研发并运营智慧云仓、在线交易、数据运营与洞察等子系统</div>
                </div>
              </div>
              <div class="display-flex application-box  animate__animated animate__slideInLeft">
                <div class="application-left">
                  <img src="@/assets/images/ebrochure/application_03.png" class="application-img animate__animated animate__slideInLeft" @dragstart.prevent/>
                </div>
                <div class="application-right">
                  <div class="application-right-title animate__animated animate__zoomIn">中恒e纺移动端产品矩阵</div>
                  <div class="application-right-des animate__animated animate__zoomIn animate__delay-1s">APP、小程序、H5多终端应用</div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <footer-Container  v-show="show === 11"></footer-container>
      </van-swipe-item>
      <!-- 12 -->
      <van-swipe-item class="swiper-slide-box">
        <!-- <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_04.png" @dragstart.prevent/> -->
        <div class="swiper-box" v-show="show === 12">
          <title-Container title="协作共赢" enTitle ="Win-win cooperation"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="cooperation">
              <div class="cooperation-01 animate__animated animate__slideInDown">
                <img src="@/assets/images/ebrochure/cooperation_01.png" class="cooperation-01-img" @dragstart.prevent/>
              </div>
              <div class="cooperation-02 display-flex align-center">
                <div class="cooperation-02-title animate__animated animate__slideInLeft">
                  <span>业务团队精英汇聚 </span>
                  <span>精准服务行业赋能</span>
                </div>
                <img src="@/assets/images/ebrochure/cooperation_02.png" class="cooperation-02-img animate__animated animate__rotateIn" @dragstart.prevent/>
              </div>
              <div class="cooperation-03 animate__animated animate__slideInUp">
                <span class="cooperation-03-text  animate__animated animate__slideInUp  animate__delay-800ms">中恒服务团队汇聚了各领域专业人才，有深耕纺织多年、企业营销根基雄厚的成员，有国际贸易经验丰富的专员，有精通各项法律法规的财税人员，共同组成了立体化、全方位的服务体系，为客户带来最好的服务方案，最好的服务体验，为合作伙伴赋能，为行业赋能。</span>
              </div>
            </div>
          </div>
        </div>
        <footer-Container v-show="show === 12"></footer-container>
      </van-swipe-item>
      <!-- 13 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_04.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 13">
          <title-Container title="荣誉资质" enTitle ="Honor"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="honer display-flex justify-between align-content-start flex-wrap">
              <img src="@/assets/images/ebrochure/honor_01.png" class="honer-img honer-img-01 animate__animated animate__zoomIn" @dragstart.prevent/>
              <img src="@/assets/images/ebrochure/honor_02.png" class="honer-img honer-img-02 animate__animated animate__zoomIn" @dragstart.prevent/>
              <img src="@/assets/images/ebrochure/honor_03.png" class="honer-img honer-img-03 animate__animated animate__zoomIn" @dragstart.prevent/>
              <img src="@/assets/images/ebrochure/honor_04.png" class="honer-img honer-img-04 animate__animated animate__zoomIn" @dragstart.prevent/>
              <img src="@/assets/images/ebrochure/honor_05.png" class="honer-img honer-img-05 animate__animated animate__zoomIn" @dragstart.prevent/>
              <img src="@/assets/images/ebrochure/honor_06.png" class="honer-img honer-img-06 animate__animated animate__zoomIn" @dragstart.prevent/>
            </div>
          </div>
        </div>
        <footer-Container v-show="show === 13"></footer-container>
      </van-swipe-item>
      <!-- 14 -->
      <van-swipe-item class="swiper-slide-box">
        <img class="swiper-slide-box-bg" src="@/assets/images/ebrochure/bg_04.png" @dragstart.prevent/>
        <div class="swiper-box" v-show="show === 14">
          <title-Container title="联系方式" enTitle ="Contact information"></title-container>
          <div  class="zh-ebrochure-content">
            <div class="link">
              <map-container></map-container>
              <div class="link-01"></div>
              <!-- <div class="link-02 animate__animated animate__zoomIn">
                <div class="animate__animated animate__bounce">点击进入官方网站</div>
              </div> -->
              <div class="link-03">
                <!-- <div class="link-title animate__animated animate__zoomIn">合力同行 创新共赢</div> -->
                <img src="@/assets/images/ebrochure/link_qr.png " class="link-qr animate__animated animate__zoomIn" @dragstart.prevent/>
                <div class="link-phone display-flex align-center justify-center">
                  <div class="phone-title animate__animated animate__zoomIn">电话：</div>
                  <div class="phone animate__animated animate__zoomIn" @click="call">400-990-9323</div>
                  <a v-show="false"  href="" ref="tels"></a>
                </div>
                <div class="link-address  animate__animated animate__zoomIn">地址：佛山市国家高新区拓思中心5座6楼</div>
              </div>
              <!-- <div class="link-04  animate__animated animate__slideInUp">
                <img src="@/assets/images/ebrochure/link_logo.png" class="link-logo" @dragstart.prevent/>
              </div> -->
            </div>
          </div>
        </div>
        <footer-Container v-show="show === 14"></footer-container>
      </van-swipe-item>
    </van-swipe>
    <div class="zh-ebrochure-arrow">
      <div class="pre-wrap-bottom">
        <div class="pre-box1">
          <div class="pre1"></div>
        </div>
        <div class="pre-box2">
          <div class="pre2"></div>
        </div>
      </div>
    </div>
    <div class="zh-ebrochure-progress">
      <div class="bar" :style="barStyle"></div>
    </div>
  </div>
</template>
<script lang="ts" setup>
    import { ref, onMounted, reactive, watch } from 'vue'
    import TitleContainer from './components/titleContainer.vue'
    import FooterContainer from './components/footerContainer.vue'
    import MapContainer from './components/map.vue'
    import 'animate.css'
    const tels = ref()
    const show = ref(-1)
    //0：初始值，1：播放音乐，2:停止音乐
    const play = ref(0)
    //滑动的页数
    const slidePage = ref(14)
    let swiperHeight = document.documentElement.clientHeight
    const showCurtain = ref(true)
    const curtainArr:any = reactive([])
    const barStyle = reactive({
      width:'0px'
    })
    let startTime = 0
    
    

    onMounted(() => {
      slideBar(0)
      initCurtain(14)
      initPlayMusic()
      setTimeout(() => {
        showCurtain.value = false
        show.value = 0
      },startTime)
    })

    const onSlideChange = (index:any) => {
      showCurtain.value = true
      setTimeout(() => {
        showCurtain.value = false
        show.value = index
        slideBar(index)
      },startTime)
      
    }

    const initPlayMusic = () => {
      const yinyueDom:any = document.getElementById('yinyue-audio')
      document.addEventListener("touchstart",function() {
        if(play.value === 0) {
          play.value = 1
          yinyueDom.play()
        }
      },false)
    }

    const playMusicChange = () => {
      play.value = play.value === 1?2:1
      play.value === 2?stopMusic():playMusic()
    }

    const playMusic = () => {
      const yinyueDom:any = document.getElementById('yinyue-audio')
      if(yinyueDom) {
        yinyueDom.currentTime = 0
        yinyueDom.play()
      }
      
    }

    const stopMusic = () => {
      const yinyueDom:any = document.getElementById('yinyue-audio')
      if(yinyueDom) {
        yinyueDom.pause()
      }
    }

    //滚动条初始化
    const slideBar = (index:any) => {
      //12为总的滑动页数 - 1
      barStyle.width = 100/slidePage.value*index + 'vw'
    }

    //启动动画初始化
    const initCurtain = (n:any) => {
      const rate = Number((1/(n/2)).toFixed(2))
      for(let i = 1; i <= n; i++) {
        const obj:any = {
          color:'',
          width:'',
          animation:''
        }
        const j = i <= n/2?(n/2 - i + 1):(i-n/2)
        const opacity = Number((rate*Number(j)).toFixed(2))
        obj.color = `rgba(33,128,197,${opacity})`
        obj.width = 750/n + 'px'
        
        const name = i <= n/2?'curtainLeft':'curtainRight' 
        const delay =  Number(((j - 1)/8*1000).toFixed(2))
        const time = 600
        obj.animation = `${name} ${time}ms ${delay}ms ease-in forwards`
        if(i === n) {
          startTime = time + delay
        }
        curtainArr.push(obj)
      }
    }

    const call = (e:any) => {
      tels.value.href = 'tel:4009909323'
      tels.value.click()
    }
</script>
<style lang="scss" scope>
  body,html {
    width:100%;
    height:100% !important;
    padding:0 !important;
    font-family: 'Microsoft YaHei';
  }
  .zh-ebrochure {
    margin:0 auto;
    overflow: hidden;
    width:100vw;
    height:100vh;
    .yinyue {
      position:fixed;
      top:30px;
      right:20px;
      width:60px;
      height:60px;
      z-index:88;
      .yinyue-box {
        position:relative;
        .yinyue-text {
          position: absolute;
          left:-145px;
          top:5px;
          width:100px;
          height:50px;
          text-align:center;
          line-height:50px;
          padding:0 10px;
          border-radius: 8px;
          background:rgba(0,0,0,.6);
          color:#fff;
          font-size:24px;
          opacity: 1;
          animation: textHidden 300ms ease-in 3s forwards;
          @keyframes textHidden {
            from {opacity:1}
            to {opacity:0}
          }
          ::after {
            position:absolute;
            content:"";
            width:0;
            height:0;
            right:-12px;
            top:15px;
            border-left: 12px solid rgba(0,0,0,.6);
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
          }
        }
        .yinyue-img {
          width:60px;
          height:60px;
          &.active {
            animation:yinyue 3000ms infinite linear;
            @keyframes yinyue {
              from {transform: rotate(0deg);}
              to {transform: rotate(360deg);}
            } 
            @-webkit-keyframes yinyue
            {
              from {transform: rotate(0deg);}
              to {transform: rotate(360deg);}
            }
          }
        }
      }
      
      .yinyue-audio {
        position:absolute;
      }
    }
    .curtain {
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      background:#fff;
      z-index:3;
      display:flex;
      justify-content: space-between;
      height:100vh;
      .curtain-box {
          @keyframes curtainLeft {
            from {margin-top:0vh;}
            to {margin-top:100vh;}
          } 
          @keyframes curtainRight {
            from {margin-bottom:0vh;}
            to {margin-bottom:100vh;}
          } 
          @-webkit-keyframes curtainLeft
          {
            from {margin-top:0vh;}
            to {margin-top:100vh;}
          }
          @-webkit-keyframes curtainRight
          {
            from {margin-bottom:0vh;}
            to {margin-bottom:100vh;}
          }
      }
    }
    &-swiper {
      height:100vh;
      background-color: #fff;
      .swiper-slide-box {
        display:flex;
        flex-direction: column;
        justify-content: center;
      }

      .swiper-slide-box-bg {
        position:absolute;
        top:50%;
        transform: translateY(-50%);
        height:100vh;
        width:100vw;
      }
      
      .index {
        text-align: center;
        background:linear-gradient(to right, rgba(5,34,107,1), rgba(9,21,76,1));;
        height:100vh;
        .index-bg {
          width:100%;
          position:absolute;
          bottom:0;
          left:0;
          right:0;
        }
        .index-logo {
          margin-top:205px;
          width:229px;
          height:197px;
          position:relative;
        }
        .index-text {
          margin-top:96px;
          font-size: 32px;
          font-weight: 800;
          color: #B39B77;
          white-space: 10px;
          font-weight: bold;
          position:relative;
        }
        .company-name {
          position: absolute;
          bottom:101px;
          left:50%;
          transform: translateX(-50%);
          .company-name-img {
            width:526px;
            height:72px;
          }
        }
      }
      .swiper-box {
        padding:0 57px 0;
        .zh-ebrochure-content {
          margin-top:38px;
          //02
          .profile {
            .profile-text {
              font-size:32px;
              color:#333333;
              line-height: 48px;
              font-weight: 500;
              margin-top:38px;
              text-indent:64px;
              &.animate__animated.animate__zoomIn {
                --animate-duration: 1.5s;
              }
            }
            .profile-img {
              width:626px;
              height: 256px;
              margin: 34px 0 40px;
            }
          }
          .profile-02 {
            .profile-02-item {
              .profile-img-04 {
                width:90px;
                height:70px;
              }
              .profile-text {
                color:#333;
                margin-left: 20px;
                .cn {
                  font-size:30px;
                }
                .en {
                  font-size:20px;
                  white-space: nowrap;
                }
                
              }
            }
            .deconate {
              width: 24px;
              height:90px;
              background:#BF8B1C;
              position:relative;
              margin:10px 0 10px 33px ;
              .triangle {
                position:absolute;
                width: 0;
                height: 0;
                margin:45px 4px;
                border-top: 10px solid #fff;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
              }
            }
          }
          //03
          .profile-01 {
            .profile-item-01 {
              .profile-01-text {
                width:301px;
                height:267px;
                padding: 18px 16px;
                background: #2386E3;
                color:#fff;
                font-size:25px;
                position:relative;
                z-index:1;
                span {
                  display:block;
                  line-height:40px;
                  &.animate__animated.animate__slideInLeft {
                    --animate-duration: 2s;
                  }
                }
                .profile-01-triangle {
                  position:absolute;
                  right:-50px;
                  top:50px;
                  width: 0;
                  height: 0;
                  
                  &.animate__animated.animate__fadeIn {
                    border-left: 50px solid #2386E3;
                    border-top: 30px solid transparent;
                    border-bottom: 30px solid transparent;
                  }
                }
              }
              .profile-01-img {
                width:296px;
                height: 303px;
                z-index:0;
              }
            }
            .profile-item-02 {
              margin-top:43px;
              .profile-02-text {
                width:353px;
                height:170px;
                padding: 18px 20px;
                background: #003399;
                color:#fff;
                font-size:25px;
                position:relative;
                span {
                  display:block;
                  line-height:40px;
                  &.animate__animated.animate__slideInRight {
                    --animate-duration: 2s;
                  }
                }
                .profile-02-triangle {
                  position:absolute;
                  left:-50px;
                  top:50px;
                  width: 0;
                  height: 0;
                  &.animate__animated.animate__fadeIn {
                    border-right: 50px solid #003399;
                    border-top: 30px solid transparent;
                    border-bottom: 30px solid transparent;
                  }
                  
                }
              }
              .profile-02-img {
                width:296px;
                height:206px;
              }
            }
            .profile-item-03 {
              margin-top:43px;
              margin-bottom:106px;
              .profile-03-text {
                width:353px;
                height:226px;
                padding: 18px 20px;
                background: #D1B366;
                color:#fff;
                font-size:25px;
                position:relative;
                z-index:1;
                span {
                  display:block;
                  line-height:40px;
                  &.animate__animated.animate__slideInLeft {
                    --animate-duration: 2s;
                  }
                }
                .profile-03-triangle {
                  position:absolute;
                  right:-50px;
                  top:50px;
                  width: 0;
                  height: 0;
                  &.animate__animated.animate__fadeIn {
                    border-left: 50px solid #D1B366;
                    border-top: 30px solid transparent;
                    border-bottom: 30px solid transparent;
                  }
                  
                }
              }
              .profile-03-img {
                width:296px;
                height:262px;
                z-index:0;
              }
            }
          }
          //04
          .service {
            margin-top:33px;
            .service-title {
              text-align: center;
              font-size:38px;
              color:#2386E3;
              font-weight:bold;
            } 
            .service-sub-title {
              width:635px;
              height:78px;
              line-height: 78px;
              background: #2386E3;
              color:#fff;
              font-size:36px;
              text-align: center;
              margin-top:24px;
            }
            .service-sub-des {
              margin-top: 28px;
              text-indent:20px;
              font-size:30px;
              color:#2386E3;
            }
          }
          .service-img {
            margin-top:20px;
            margin-bottom:29px;
            .service-01-img {
              width:254px;
              height:159px;
              margin-top:98px;
            }
            .service-02-img {
              width:335px;
              height:213px;
              margin-left:34px;
            }
          }
          //5和6
          .service-decorate {
            margin-bottom:60px;
            .service-decorate-left {
              position:relative;
              margin-top: 39px;
              .service-decorate-circle {
                position:absolute;
                width:70px;
                height:70px;
                line-height:70px;
                text-align:center;
                color:#fff;
                font-size: 48px;
                background: linear-gradient(0deg, #2386E3, #51B2F8);
                border-radius: 50%;
              }
              .service-decorate-circle-01 {
                top:70px;
                left:70px;
              }
              .service-decorate-circle-02 {
                top:300px;
                left:165px;
              } 
              .service-decorate-circle-03 {
                top:550px;
                left:70px;
              }
              .service-decorate-01 {
                width:700px;
                height:700px;
                border-radius:350px;
                margin-left:-500px;
                border:1px solid #2CA4DE;
                .service-decorate-02 {
                  width:540px;
                  height:540px;
                  border-radius:270px;
                  position:absolute;
                  background: rgba(35,134,227,0.2);
                  top:80px;
                  margin-left:80px;
                  .service-decorate-03 {
                    width:430px;
                    height:430px;
                    border-radius:215px;
                    background: linear-gradient(0deg, #2386E3, #51B2F8);
                    box-shadow: 0px 0px 62px 0px rgba(17,105,156,0.25);
                    position:absolute;
                    top:55px;
                    margin-left:55px;
                    .service-decorate-03-text {
                      position:absolute;
                      right:0;
                      top:50%;
                      transform: translateY(-50%);
                      margin-right:50px;
                      text-align:center;
                      color:#fff;
                      span {
                        display:block;
                      }
                    }
                  }
                }
              }
            }
            .service-content-right {
              .service-content-right-box {
                background: #D5EDF8;
                opacity: 0.8;
                border-radius: 35px;
                padding:25px 33px;
                margin-top:16px;
                .service-content-right-box-title {
                  font-size:30px;
                  color:#3B3E41;
                  line-height: 32px;
                  display:block;
                }
                .service-content-right-box-des {
                  span {
                    font-size:26px;
                    color:#3B3E41;
                    line-height: 28px;
                  }
                }
              }
              .service-content-right-box-01 {
                width: 393px;
                margin-left:-20px;
              }
              .service-content-right-box-02 {
                width: 350px;
                margin-left:50px;
              }
              .service-content-right-box-03 {
                width: 393px;
                margin-left:-20px;
              }
            }
          }
        
          //7
          .industry {
            margin-top: 35px;
            margin-bottom:12px;
            .industry-item {
              margin-bottom:25px;
              .industry-img {
                width:317px;
                height:199px;
              }
              .industry-right {
                margin:10px 0 0 32px;
                .industry-right-title {
                  color:#B39B77;
                  font-size:34px;

                }
                .industry-right-des {
                  color:#333333;
                  font-size:28px;
                  margin-top: 20px;
                  span {
                    display: block;
                  }
                }
              }
            }
          }
          
          //8
          .merge {
            margin-top:55px;
            .merge-box-01-border {
              border:1px solid #2386E3;
            }
            .merge-box-01 {
              padding:55px 30px 25px;
              position:relative;
              z-index:1;
              .merge-01-title {
                width:260px;
                height:64px;
                line-height:64px;
                position:absolute;
                top:-32px;
                background:#2386E3;
                color:#fff;
                font-size:36px;
                font-weight:bold;
                text-align: center;
                &::after {
                  content:'';
                  position:absolute;
                  width: 0;
                  height: 0;
                  left:260px;
                  border-left: 44px solid #2386E3;
                  border-bottom: 32px solid transparent;
                  border-top: 32px solid transparent;
                }
              }
              .merge-01-des {
                color:#3A7EB8;
                font-size:30px;
                line-height: 51px;
                font-weight:500;
              }
            }
            .merge-box-02 {
              height:228px;
              position:relative;
              margin:32px 9px 30px;
              .merge-02-01 {
                width:298px;
                height:228px;
              }
              .merge-02-02 {
                width:298px;
                height:228px;
              }
            }
            .merge-box-03 {
              height: 332px;
              .merge-02 {
                margin: 25px 9px 0;
                width:617px;
                height: 308px;
              }
            }
            .merge-box-04 {
              margin-top:-125px;
              .merge-map-01 {
                width:712px;
                height:637px;
              }
            }
            .merge-box-05 {
              margin:-140px 0 30px 160px;
              .merge-map-02 {
                width:512px;
                height:388px;
              }
            }
          }
          //9
          .merge-01 {
            margin-bottom:60px;
            .merge-01-title {
              width:625px;
              height:64px;
              line-height:64px;
              background: #2386E3;
              color:#fff;
              text-align:center;
              font-weight: bold;

            }
            .merge-01-des {
              width:450px;
              border:1px solid #2386E3;
              color:#2386E3;
              font-size:30px;
              line-height:51px;
              padding:35px 51px;
              margin:19px auto 0;
            }
            .merge-01-decorate {
              margin:43px auto 0;
              text-align: center;
              position:relative;
              border:1px solid #BDBCB9;
              border-radius: 50%;
              width:487px;
              height:487px;
              .merge-circle-01 {
                position:absolute;
                top:-120px;
                right:-220px;
                width:164px;
                height:164px;
                background: #2386E3;
                opacity: 0.2;
                border-radius: 50%;
              }
              .merge-circle-02 {
                position:absolute;
                bottom:-50px;
                left:-108px;
                width:84px;
                height:84px;
                background: #2386E3;
                opacity: 0.2;
                border-radius: 50%;
                opacity:1;
              }
              .merge-circle-03 {
                position:absolute;
                bottom:20px;
                right:58px;
                width:65px;
                height:65px;
                background: #2386E3;
                border-radius: 50%;
              }
              .merge-circle-04 {
                position:absolute;
                bottom:130px;
                left:10px;
                width:234px;
                height:234px;
                border-radius: 50%;
                border:50px solid #2386E3;
                box-sizing: border-box;
              }
              .merge-03 { 
                position:absolute;
                width:324px;
                height: 324px;
                right:0px;
                bottom:100px;
                overflow: hidden;
                border-radius: 50%;
              }
            }
          }

          //10
          .application {
            margin-bottom:80px;
            .application-box {
              margin-top: 54px;
              .application-left {
                width:362px;
                height:241px;
                //background:#003399;
                .application-img {
                  width:362px;
                  height:241px;
                }
              }
              .application-right {
                border:1px solid #023892;
                padding:15px 5px 25px 25px;
                box-sizing: border-box;
                height:241px;
                margin-left:-1px;
                .application-right-title {
                  color:#023892;
                  font-size:34px;
                  line-height:42px;
                  font-weight:bold;
                }
                .application-right-des {
                  color:#5C5D5D;
                  font-size: 26px;
                  padding-right:20px;
                  line-height: 37px;
                  margin-top:15px;
                }
              }
            }
          
          }

          //11
          .cooperation {
            margin-bottom:35px;
            .cooperation-01 {
              text-align:center;
              .cooperation-01-img {
                width:630px;
                height:299px;
              }
            }
            .cooperation-02 {
              margin-top:-56px;
              .cooperation-02-title {
                width:280px;
                color:#2386E3;
                font-size:34px;
                line-height: 52px;
              }
              .cooperation-02-img{
                width: 270px;
                height:270px;
                margin-left:28px;
              }
            }
            .cooperation-03 {
              width: 635px;
              height: 421px;
              background: rgba(35,134,227,0.09);
              margin-top:-56px;
              .cooperation-03-text {
                color:#2386E3;
                font-size:30px;
                line-height: 51px;
                padding:59px 29px 26px 37px;
                display:inline-block;
              }
            }
          }
          //12
          .honer {
            margin-bottom:100px;
            .honer-img {
              width:302px;
              height:219px;
              margin-top:50px;
            }
            .honer-img-01,.honer-img-02 {
              --animate-duration: 1600ms;
            }
            .honer-img-03,.honer-img-04 {
              --animate-duration: 1200ms;
            }
            .honer-img-05,.honer-img-06 {
              --animate-duration: 800ms;
            }
          }
          //13
          .link {
            .map-container {
              margin: 30px auto;
              width: 632px;
              height: 450px;
            }
            .link-01 {

            }
            .link-02 {
              width: 638px;
              height: 76px;
              line-height: 76px;
              text-align:center;
              white-space: 10px;
              background: #D1B366;
              font-size: 34px;
              font-weight: 500;
              color: #FFFFFF;
            }
            .link-03 {
              text-align: center;
              margin-top:45px;
              margin-bottom:45px;
              .link-title {
                font-size:36px;
                color:#2386E3;
                font-weight: bold;
              }
              .link-qr {
                width:212px;
                height:201px;
                margin-top:13px;
                border:1px solid #2386E3;
              }
              .link-phone {
                color:#2386E3;
                margin-top:40px;
                .phone-title {
                  font-size:32px;
                }
                .phone {
                  font-size:42px;
                  font-weight: bold;
                  color:#2386E3
                }
              }
              .link-address {
                font-size:32px;
                color:#2386E3;
                margin-top:14px;
              }
            }
            .link-04 {
              margin-top:50px;
              text-align: center;
              .link-logo {
                width:564px;
                height:77px;
              }
            }
          }
        }
      }
    }
    .zh-ebrochure-arrow {
      position:fixed;
      left:50%;
      transform: translateX(-50%);
      -webkit-animation: start 1.5s ease-in-out infinite;
      -moz-animation: start 1.5s infinite ease-in-out;
      animation: start 1.5s ease-in-out infinite;
      @keyframes start {
        from {
          bottom:30px;
          opacity: 1;
        }
        
        to {
          bottom:60px;
          opacity: 0;
        }
      }
      .pre-wrap-bottom {
        width: 50px;
        height: 28px;
        position: relative;
        .pre-box1 {
          height: 30px;
          width: 50px;
          position: absolute;
          overflow: hidden;
          .pre1 {
            background-color: #fff;
            width: 28px;
            height: 10px;
            border-radius: 4px;
            position: absolute;
            box-shadow: 1px -1px 1px #646464;
            top: 10px;
            transform: rotate(130deg);
            -webkit-transform: rotate(130deg);
            left: -1px;
          }
        }
        .pre-box2 {
          height: 30px;
          width: 50px;
          position: absolute;
          overflow: hidden;
          .pre2 {
            background-color: #fff;
            width: 28px;
            height: 10px;
            border-radius: 4px;
            position: absolute;
            box-shadow: 1px -1px 1px #646464;
            top: 10px;
            left: 10px;
            -webkit-transform: rotate(50deg);
            transform: rotate(50deg);
          }
        }
      }
    }
    .zh-ebrochure-progress {
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      width:100%;
      height:10px;
      background-color: rgba(0,0,0,.2);
      .bar {
        background-color:#08a1ef;
        height:10px;
        position:relative;
      }
    }
  }
</style>